html {
  --main-color: #ee4f12;
  --main-color-dark: #ee4f12;
  --main-color-light: #ee4f12;
  // header
  --header-bg-color: #f4f7f9;
  --header-color: #1F2328;
  --header-bg-hover-color: #f4f7f9;

  // sider
  --sider-bg-color: #212121;
  --sider-darken-bg-color: #212121;
  --sider-lighten-bg-color: #212121;

  --text-color: rgba(0 0 0 / 85%);
  --border-color: #d9d9d9;
  --border-color-dark: #424242;
  --component-background-color: #fff;
  --app-content-background-color: #fafafa;

  &[data-theme='dark'] {
    --text-color: #c9d1d9;
    --border-color: #424242;
    --component-background-color: #151515;
    --app-content-background-color: #1e1e1e;
  }
}

@white: #fff;
@black: #000;

@content-bg: #f4f7f9;

@border-color-base: var(--border-color);
@border-color-dark: var(--border-color-dark);

@component-background: var(--component-background-color);

@iconify-bg-color: #5551;

// Dark-light
@border-color-shallow-dark: #cececd;

// Light-dark
@border-color-light: @border-color-base;

// =================================
// ==============message==============
// =================================

// success-bg-color
@success-background-color: #f1f9ec;
// info-bg-color
@info-background-color: #e8eff8;
// warn-bg-color
@warning-background-color: #fdf6ed;
// danger-bg-color
@danger-background-color: #fef0f0;

// =================================
// ==============Header=============
// =================================

@header-bg-color: var(--header-bg-color);
@header-bg-hover-color: var(--header-bg-hover-color);
@header-color: var(--header-color);
@header-light-desc-color: #7c8087;

// =================================
// ==============Menu============
// =================================

// let -menu
@sider-bg-color: var(--sider-bg-color);
@sider-darken-bg-color: var(--sider-darken-bg-color);
@sider-lighten-bg-color: var(--sider-lighten-bg-color);

// trigger
@trigger-dark-hover-bg-color: rgba(255, 255, 255, 0.2);
@trigger-dark-bg-color: rgba(255, 255, 255, 0.1);

// =================================
// ==============tree============
// =================================
// tree item hover background
@tree-hover-background-color: #f5f7fa;
// tree item hover font color
@tree-hover-font-color: #f5f7fa;

// =================================
// ==============Text color-=============
// =================================

// Main text color
@text-color-base: var(--text-color);

// =================================
// =======app content color=========
// =================================
@app-content-background: var(--app-content-background-color);

// Label color
@text-color-call-out: #606266;

// Auxiliary information color-dark
@text-color-help-dark: #909399;

// =================================
// ==============breadcrumb=========
// =================================
@breadcrumb-item-normal-color: #999;
// =================================
// ==============button=============
// =================================

@main-color: var(--main-color);
@main-color-light: var(--main-color-light);
@main-color-dark: var(--main-color-dark);
@button-primary-color: @main-color;
@button-primary-hover-color: @main-color-light;
@button-primary-active-color: @main-color-dark;

@button-ghost-color: @white;
@button-ghost-hover-color: lighten(@white, 10%);
@button-ghost-hover-bg-color: #e1ebf6;
@button-ghost-active-color: darken(@white, 10%);

@button-success-color: @success-color;
@button-success-hover-color: lighten(@success-color, 10%);
@button-success-active-color: darken(@success-color, 10%);

@button-warn-color: @warning-color;
@button-warn-hover-color: lighten(@warning-color, 10%);
@button-warn-active-color: darken(@warning-color, 10%);

@button-error-color: @error-color;
@button-error-hover-color: lighten(@error-color, 10%);
@button-error-active-color: darken(@error-color, 10%);

@button-cancel-color: @text-color-call-out;
@button-cancel-bg-color: @white;
@button-cancel-border-color: @border-color-shallow-dark;

// Mouse over
@button-cancel-hover-color: @main-color;
@button-cancel-hover-bg-color: @white;
@button-cancel-hover-border-color: @main-color;
